<template>
    <view>
        <!--        <view class="items" v-if="countShow">
            <view>生成数量：</view>
            <view> <input type="text" placeholder="请输入生成数量(至少 1 个)" v-model="count"></view>
        </view> -->
        <!--        <view class="items">
            <view>编号前缀：</view>
            <view> <input type="text" placeholder="请输入编号前缀(用于区分商家)" v-model="number_first"></view>
        </view> -->
        <view class="items">
            <view>设备名称：</view>
            <view> <input type="text" placeholder="请输入设备名称" v-model="facility_name"></view>
        </view>
        <view class="itemScan">
            <view>设备SN：</view>
            <view> <input type="text" placeholder="设备编号(扫描设备上的二维码)" v-model="facility_number"></view>
            <view @click="scanCodeH5()">
                <image src="/static/scan.png" mode="scaleToFill" />
            </view>
        </view>
        <view class="item">
            <view class="item_1">设备品牌：</view>
            <view class="item_2">
                <u-radio-group v-model="brand_name" placement="row" size="30rpx" labelSize="20rpx">
                    <u-radio activeColor="#007aff" label="商米" name="商米"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="金泰宜" name="金泰宜"></u-radio>

                </u-radio-group>
            </view>
        </view>
        <!-- <view class="item_date">
            <view>生产日期：</view>
            <view @click="show = true">{{ shippingtime }}</view>
        </view> -->
        <view class="submit" @click="submit">确认</view>
        <u-datetime-picker :show="show" v-model="shippingtime" mode="date" @confirm="confirmDate"
            @cancel="show = false"></u-datetime-picker>
        <u-picker :show="userShow" :columns="columns" keyName="username" @confirm="confirmType" :minDate="1587524800000"
            @cancel="closeType"></u-picker>
    </view>
</template>

<script>
import { facilityadd } from "@/api/user.js"
let Qrcode = require('../../utils/reqrcode.js')
export default {
    components: {},
    props: {},
    data() {
        return {
            user_type: 1,
            switchs: 1,
            state: 1,
            shippingtime: '请选择出厂日期',
            count: '',
            number_first: '',
            adwords: '',
            content: '',
            facility_name: '',
            facility_number: '',
            id: '',
            show: false,
            countShow: true,
            owen_user: '请选择商户',
            owen_user_id: '',
            userShow: false,
            columns: [],
            brand_name: '商米'
        };
    },
    watch: {},
    methods: {
        async confirmDate(e) {
            this.show = false;
            const timeFormat = uni.$u.timeFormat;
            let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
            this.shippingtime = timeValue;
        },
        closeDate() {
            this.show = false;
        },
        submit() {
            if (this.facility_name == '') {
                uni.showToast({
                    title: '请输入设备名称',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            if (this.facility_number == '') {
                uni.showToast({
                    title: '请输入设备编号',
                    icon: 'none',
                    mask: true
                })
                return false;
            }

            facilityadd({
                count: this.count,
                number_first: this.number_first,
                adwords: this.adwords,
                use_type: this.user_type,
                state: this.state,
                content: this.content,
                facility_name: this.facility_name,
                facility_number: this.facility_number,
                id: this.id,
                brand_name: this.brand_name
                // shippingtime: this.shippingtime
            }).then(res => {
                console.log(res)
                if (res.code == 1) {
                    uni.showToast({
                        title: '成功～',
                        icon: 'none',
                        mask: true
                    })
                    setTimeout(() => {
                        uni.navigateBack({ delta: 1 })
                    }, 2000)
                }
            })
        },
        scanCode() {

        },
        scanCodeH5() {
            uni.chooseImage({
                count: 1,
                success: imgRes => {
                    Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
                    Qrcode.qrcode.callback = (codeRes) => {
                        if (codeRes.indexOf('error') >= 0) {
                            // 二维码识别失败

                        } else {
                            // 二维码识别成功
                            let r = this.decodeStr(codeRes)
                            this.facility_number = r
                        }
                    }
                }
            })
        },
        // 获取文件地址函数
        getObjectURL(file) {
            var url = null
            if (window.createObjectURL !== undefined) { // basic
                url = window.createObjectURL(file)
            } else if (window.URL !== undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL !== undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        },
        // 解码，输出：中文
        decodeStr(str) {
            var out, i, len, c;
            var char2, char3;
            out = "";
            len = str.length;
            i = 0;
            while (i < len) {
                c = str.charCodeAt(i++);
                switch (c >> 4) {
                    case 0:
                    case 1:
                    case 2:
                    case 3:
                    case 4:
                    case 5:
                    case 6:
                    case 7:
                        // 0xxxxxxx
                        out += str.charAt(i - 1);
                        break;
                    case 12:
                    case 13:
                        // 110x xxxx 10xx xxxx
                        char2 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                        break;
                    case 14:
                        // 1110 xxxx 10xx xxxx 10xx xxxx
                        char2 = str.charCodeAt(i++);
                        char3 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x0F) << 12) |
                            ((char2 & 0x3F) << 6) |
                            ((char3 & 0x3F) << 0));
                        break;
                }
            }
            return out;
        }
    },
    onShow() { },
    onLoad(option) {
        console.log(option)
        if (option.type == 'add') {
            uni.setNavigationBarTitle({
                title: '添加设备'
            });
        } else {
            this.countShow = false
            const item = JSON.parse(decodeURIComponent(option.info));
            console.log(item)
            this.facility_name = item.facility_name
            this.facility_number = item.facility_number
            this.id = item.id
            this.shippingtime = item.shippingtime
        }
    },
};
</script>
<style scoped lang='scss'>
.item {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    .item_1 {
        width: 30%;
    }

    .item_2 {
        width: 50%;
        margin-top: 40rpx;

        text-align: right;
    }
}

.items {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    view:nth-child(1) {
        width: 30%;
    }

    view:nth-child(2) {
        width: 70%;
        // text-align: right;

        input {
            width: 100%;
            height: 100%;
        }
    }
}

.itemScan {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    view:nth-child(1) {
        width: 30%;
    }

    view:nth-child(2) {
        width: 60%;
        // text-align: right;

        input {
            width: 100%;
            height: 100%;
        }
    }

    view:nth-child(3) {
        width: 60rpx;
        height: 60rpx;

        image {
            width: 100%;
            height: 100%;
        }

        margin-top: 25rpx;
    }
}

.item_date {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    view:nth-child(1) {
        width: 30%;
    }

    view:nth-child(2) {
        width: 70%;
        color: $uni-color-primary;
        // text-align: right;
    }
}

.submit {
    width: 94%;
    height: 90rpx;
    background-color: $uni-color-primary;
    border-radius: 50rpx;
    margin: auto;
    margin-top: 130rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
}
</style>